<template>
  <div id="colorMedium" 
    :style="{ width:width}" 
    ref="colorMedium"
    :class="['colorMedium',{currentMedium:isCurrent}]"
    >
    <div id='color_tag' 
    :style="{ 'background-color':'rgb' +color_medium[1]}"
    
    >
    {{color_medium[0]}}
    </div>
    <color-basic
        v-for="(color, index) in color_basics"
      :key="index"
      ref = 'colorBasic'
      :color_basic='color'
      :isCurrent='index === current_idx'
      :style="{
        'background-color': 'rgb' + color[1],
        left: 10+index  * interval + 'px',
        top: 40 + 'px'
      }"
      @mousedown.native='mouseDown(index)'
      @moveColorBasic = "$emit('moveColorBasic',index)"
    >
    </color-basic>
  </div>
</template>
<script>
import colorBasic from './colorbasic.vue'

export default {
  name: "colorMedium",
  components:{
      colorBasic
  },
  props: ["color_medium",'color_basics','isCurrent'],
  data() {
    return {
      active_idx: -1,
      current_idx: -1,
      background_color: 'rgb(255,55,55)',
      interval:120,
    };
  },
  computed:{
    width(){
      return this.color_basics.length * this.interval + 'px';
    }
  },
  methods: {
    mouseDown(index) {
      console.log('medium',this.current_idx)
      this.current_idx = index;
      this.$emit('pickColorTag',index)
    },
    isOver(x,y){
        let color_medium = this.$refs.colorMedium
        if(color_medium.offsetLeft<x&& x<color_medium.offsetLeft+color_medium.offsetWidth&&
          color_medium.offsetTop<y&& y<color_medium.offsetTop+color_medium.offsetHeight){
              return true
          }
        return false
    },
    isOverBasic(x,y) {
      let [parentLeft, parentTop] = [
        this.$refs.colorMedium.offsetLeft,
        this.$refs.colorMedium.offsetTop,
      ];
      let [localX, localY] = [x - parentLeft, y - parentTop];
        let x_idx = parseInt(localX/this.interval)
        if(x_idx>=this.color_basics.length){
            if(this.active_idx >-1){
                this.$refs.colorBasic[this.active_idx].$el.style["background-color"] = "rgb" + this.color_basics[this.active_idx][1];
            }
            this.active_idx = -1;
        }
        else{
            let color_basic = this.$refs.colorBasic[x_idx].$el
            if(color_basic.offsetLeft<localX&& localX<color_basic.offsetLeft+color_basic.offsetWidth
            && color_basic.offsetTop<localY&& localY<color_basic.offsetTop+color_basic.offsetHeight){
                this.active_idx = x_idx
                this.$refs.colorBasic[x_idx].$el.style["background-color"] = this.background_color;
            }
            else {
            if(this.active_idx >-1){
                this.$refs.colorBasic[this.active_idx].$el.style["background-color"] = "rgb" + this.color_basics[this.active_idx][1];
            }
            this.active_idx = -1;
            }
        }
        return this.active_idx
    },
  },
};
</script>

<style scoped>
.colorMedium {
  display:inline-block;
  position: relative;
  margin: 10px;
  height:145px;
  border: 5px solid black;
}

#color_tag {
  cursor:pointer;
  margin:5px;
  height:30px;
  font-size:25px;
  line-height:30px;
}

.currentMedium {
  border: 10px solid red;
  margin: 5px;
}

</style>